import React, { Component } from 'react';
import { connect } from 'dva';
import {
    Modal, Spin, Button,
    Card, Form, DatePicker,
    Table, Descriptions, Tabs, Row, Col,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { FormattedMessage } from 'umi/locale';
import APP from '@/components/Tool/BaseAPP';
import moment from 'moment';
const {RangePicker} = DatePicker;

let pagingData = {
    _pageSize: 10,
    _current: 1,
    _total: 0,
};

@connect(({ pointModel }) => ({
    pointModel,
}))
@Form.create()
class showDeviceLog extends Component {
    state = {
        loading: false,
        pointData: {},
        pointId: null,
        bType: 3,
        tabPanes: 4,
        pageDataSource: [],
    };
    tabsCallback = key => {
        let bType = 3;
        switch (key) {
            case '2':
                bType = 4;
                break;
            case '3':
                bType = 2;
                break;
            case '4':
                bType = 1;
                break;
        }
        console.log('tabsKey：' + key + '，bType：' + bType);
        const that = this;
        that.setState({bType: bType}, function () {
            that.findPageDataSource();
        });
    };
    columns = [
        {
            title: '创建日期',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '文件大小',
            dataIndex: 'fileSize',
            key: 'fileSize',
        },
        {
            title: '文件路径',
            dataIndex: 'filePath',
            key: 'filePath',
            render: text => {
                return <a href={text} download>{text}</a>;
            }
        }
    ];

    componentDidMount() {
        this.initPageParams();
    }

    initPageParams() {
        const that = this;
        const {state} = that.props.location;
        if (APP.isValidObj(state)) {
            const {pointId} = state;
            const pageDataSource = [];
            for (let i = 0; i < that.state.tabPanes; i++) {
                pageDataSource.push([]);
            }
            that.setState({
                pointId: pointId,
                pageDataSource: pageDataSource
            },function () {
                that.getDataByPointId();
                that.findPageDataSource();
            });
        }
    }

    getDataByPointId() {
        const that = this;
        const {dispatch} = that.props;
        APP.loading(that);
        dispatch({
            type: 'pointModel/getPointById',
            payload: {id: that.state.pointId},
            callback: function(data) {
                APP.closeLoading(that);
                if (data.success) {
                    that.setState({
                        pointData: data.datas,
                    });
                }
            },
        });
    };

    render() {
        const that = this;
        const {loading, pointData, pageDataSource1,
            pageDataSource2, pageDataSource3} = that.state;
        const {getFieldDecorator} = that.props.form;
        let xstatus = pointData.xstatus;
        xstatus = APP.isValidObj(xstatus) ? xstatus : 0;
        switch (xstatus) {
            case 1:
                xstatus = '正常';
                break;
            case 2:
                xstatus = <span style={{color:'red'}}>离线（{pointData.offHours}小时）</span>;
                break;
            case 3:
                xstatus = '损坏';
                break;
            default:
                xstatus = '其他';
                break;
        }
        let isenabled = pointData.isenabled === 1 ? '上架' : '下架';
        const journalCount = pointData.journalCount;
        let journalCountStr = '';
        if (APP.isValidObj(journalCount)) {
            journalCountStr = journalCount + "（上架数：" + pointData.enaJournalCount + "）";
        }
        let installDate = pointData.installDate;
        if (APP.isValidObj(installDate)) {
            installDate = APP.momentFormatToStr(moment(installDate, 'YYYY-MM-DD'));
        }
        return (
            <Spin spinning={loading}>
                <PageHeaderWrapper title={<FormattedMessage id="menu.deviceLog.showDeviceLog" />}>
                    <Card>
                        <Descriptions bordered title={
                            <div>
                                <span style={{marginRight: 15}}>点位信息</span>
                                <Button type={"primary"} onClick={() => {that.reboot()}}>重启机器</Button>
                            </div>
                        }>
                            <Descriptions.Item label={'运营商'}>{pointData.operatorName}</Descriptions.Item>
                            <Descriptions.Item label={'楼盘名称'}>{pointData.hourseName}</Descriptions.Item>
                            <Descriptions.Item label={'楼盘类型'}>{pointData.gvlistName}</Descriptions.Item>
                            <Descriptions.Item label={'区域'}>{pointData.areaName}</Descriptions.Item>
                            <Descriptions.Item label={'点位名称'}>{pointData.elevatorName}</Descriptions.Item>
                            <Descriptions.Item label={'设备生产商'}>{pointData.producer}</Descriptions.Item>
                            <Descriptions.Item label={'机器串码'}>{pointData.imei}</Descriptions.Item>
                            <Descriptions.Item label={'上架状态'}>{isenabled}</Descriptions.Item>
                            <Descriptions.Item label={'设备状态'}>{xstatus}</Descriptions.Item>
                            <Descriptions.Item label={'期刊数量'}>{journalCountStr}</Descriptions.Item>
                            <Descriptions.Item label={'安装日期'}>{installDate}</Descriptions.Item>
                            <Descriptions.Item label={'安装人'}>{pointData.workerName}</Descriptions.Item>
                        </Descriptions>
                        <Tabs style={{marginTop: 30}} onChange={that.tabsCallback} defaultActiveKey={1}>
                            <Tabs.TabPane tab={'智播日志'} key={1}>
                                <Form layout={"inline"}>
                                    <div style={{display: 'flex', alignItems: 'center'}}>
                                        <Form.Item label={'要获取的时间'}>
                                            {getFieldDecorator('createTime', {})(<RangePicker />)}
                                        </Form.Item>
                                        <Button type={"primary"} onClick={()=> {that.downloadDeviceLog()}}>获取智播日志</Button>
                                    </div>
                                </Form>
                                <Table
                                    style={{marginTop: 15}}
                                    bordered
                                    columns={that.columns}
                                    dataSource={pageDataSource1}
                                    pagination={{
                                        pageSize: pagingData._pageSize,
                                        current: pagingData._current,
                                        total: pagingData._total,
                                        onChange: page => {
                                            pagingData._current = page;
                                            that.findPageDataSource();
                                        },
                                        showTotal: total => `共 ${total} 条数据`,
                                    }}
                                />
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={'光传日志'} key={2}>
                                <Form layout={"inline"}>
                                    <div style={{display: 'flex', alignItems: 'center'}}>
                                        <Form.Item label={'要获取的时间'}>
                                            {getFieldDecorator('createTime', {})(<RangePicker />)}
                                        </Form.Item>
                                        <Button type={"primary"} onClick={()=> {that.downloadDeviceLog()}}>获取光传日志</Button>
                                    </div>
                                </Form>
                                <Table
                                    style={{marginTop: 15}}
                                    bordered
                                    columns={that.columns}
                                    dataSource={pageDataSource1}
                                    pagination={{
                                        pageSize: pagingData._pageSize,
                                        current: pagingData._current,
                                        total: pagingData._total,
                                        onChange: page => {
                                            pagingData._current = page;
                                            that.findPageDataSource();
                                        },
                                        showTotal: total => `共 ${total} 条数据`,
                                    }}
                                />
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={'截图'} key={3}>
                                <Form layout={"inline"}>
                                    <div style={{display: 'flex', alignItems: 'center'}}>
                                        <Form.Item label={'要获取的时间'}>
                                            {getFieldDecorator('createTime', {})(<RangePicker />)}
                                        </Form.Item>
                                        <Button type={"primary"} onClick={()=> {that.downloadDeviceLog()}}>获取截图</Button>
                                    </div>
                                </Form>
                                <Table
                                    style={{marginTop: 15}}
                                    bordered
                                    columns={that.columns}
                                    dataSource={pageDataSource2}
                                    pagination={{
                                        pageSize: pagingData._pageSize,
                                        current: pagingData._current,
                                        total: pagingData._total,
                                        onChange: page => {
                                            pagingData._current = page;
                                            that.findPageDataSource();
                                        },
                                        showTotal: total => `共 ${total} 条数据`,
                                    }}
                                />
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={'播放记录'} key={4}>
                                <Form layout={"inline"}>
                                    <div style={{display: 'flex', alignItems: 'center'}}>
                                        <Form.Item label={'要获取的时间'}>
                                            {getFieldDecorator('createTime', {})(<RangePicker />)}
                                        </Form.Item>
                                        <Button type={"primary"} onClick={()=> {that.downloadDeviceLog()}}>获取播放记录</Button>
                                    </div>
                                </Form>
                                <Table
                                    style={{marginTop: 15}}
                                    bordered
                                    columns={that.columns}
                                    dataSource={pageDataSource3}
                                    pagination={{
                                        pageSize: pagingData._pageSize,
                                        current: pagingData._current,
                                        total: pagingData._total,
                                        onChange: page => {
                                            pagingData._current = page;
                                            that.findPageDataSource();
                                        },
                                        showTotal: total => `共 ${total} 条数据`,
                                    }}
                                />
                            </Tabs.TabPane>
                        </Tabs>
                    </Card>
                </PageHeaderWrapper>
            </Spin>
        );
    }

    findPageDataSource() {
        const that = this;
        const {dispatch} = that.props;
        const {pointId, bType} = that.state;
        if (!APP.isValidObj(bType)) {
            Modal.error({content: '查询类型不能为空'});
            return;
        }
        if (!APP.isValidObj(pointId)) {
            Modal.error({content: '点位ID不能为空'});
            return;
        }
    };

    downloadDeviceLog() {
        const that = this;
        const {dispatch} = that.props;
        const {pointId, bType} = that.state;
        if (!APP.isValidObj(bType)) {
            Modal.error({content: '查询类型不能为空'});
            return;
        }
        if (!APP.isValidObj(pointId)) {
            Modal.error({content: '点位ID不能为空'});
            return;
        }
        dispatch({
            type: 'pointModel/downloadDeviceLog',
            payload: {
                id: pointId,
                bType: bType
            },
            callback: function(data) {
                APP.closeLoading(that);
                if (data.success) {
                    Modal.success({content: data.msg});
                } else {
                    Modal.error({content: data.msg});
                }
            },
        });
    };

    reboot() {
        const that = this;
        const {dispatch} = that.props;
        const {pointId} = that.state;
        if (!APP.isValidObj(pointId)) {
            Modal.error({content: '点位ID不能为空'});
            return;
        }
        dispatch({
            type: 'pointModel/pointReboot',
            payload: { id: pointId },
            callback: function(data) {
                APP.closeLoading(that);
                if (data.success) {
                    Modal.success({content: data.msg});
                } else {
                    Modal.error({content: data.msg});
                }
            },
        });
    };
}

export default showDeviceLog;
